<template>
  <div>
    <div id="childapp">
      子应用
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { start, loadMicroApp } from "qiankun";
@Component
export default class Childapp extends Vue {
  @Prop() private msg!: string;
  private beforeRouteEnter(
    to: any,
    from: any,
    next: (params?: (vm: Childapp) => void) => void
  ) {
    console.log("路由进入");
    next(vm => {
      if (!window.$srdQiankunStarted) {
        console.log("乾坤开始");
        window.$srdQiankunStarted = true;
        start({
          // prefetch:"all",
          sandbox: {
            experimentalStyleIsolation: true,
            // strictStyleIsolation: true
          }
        });
      }
    });
  }
  private beforeRouteLeave(
    to: any,
    from: any,
    next: (params?: (vm: Childapp) => void) => void
  ) {
    console.log("路由离开");
    window.$srdQiankunStarted = false;
    next();
  }

  // private mounted() {
  //   //this.$router.push("./");//进入该路由加/跳转到微应用的默认路径
  //   if (!window.$qiankunStarted) {
  //     console.log("乾坤开始");
  //     window.$qiankunStarted = true;
  //     start({
  //       sandbox: { experimentalStyleIsolation: true }
  //     });
  //   }
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
#childapp {
  display: block;
  width: 100%;
  // height: calc(100% - 50px);
  // position: absolute;
}
</style>
